<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="../images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../images/apple-touch-icon.png">
	<title>weather</title>
	<link rel="stylesheet" href="../scripts/lib/seedsui/seedsui.min.css">
</head>

<body>
	<header>
	    <div class="titlebar">
	    	<a class="titlebar-button" href="javascript:back()">
	            <i class="icon icon-arrowleft"></i>
	        </a>
	        <h1 class="titlebar-title">百度天气</h1>
	    </div>
	</header>
	<article>
		<!--天气:start-->
		<div class="weather-box bg-primary" id="ID-WeatherContainer">
			<div class="weather-collapse">
			<p><span class="weather-current-city">地区</span><span class="weather-name">天气名称</span></p>
		    	<p><span>空气</span><span class="weather-air-quality">良</span><span class="weather-current-pm25">load</span></p>
		    </div>
			<div class="weather-topinfo">
				<i class="icon icon-position-fill"></i>
		    	<span class="weather-current-city">地区</span>
		        <small id="weather-current-date" class="weather-current-date">日期</small>
		    </div>
			<div class="weather-today">
		    	<div class="weather-today-left">
		        	<div id="weather-current-temperature" class="weather-current-temperature">load</div>
		            <div class="sndinfo">
		                <p id="weather-today-temperature">load</p>
		                <p><span>空气</span><span class="weather-air-quality">load</span><span class="weather-current-pm25">load</span></p>
		            </div>
		        </div>
		        <div class="weather-today-right">
		        	<div id="weather-current-icon" class="weather-icon-sunny"></div>
		            <div class="sndinfo">
		                <p class="weather-name">天气名称</p>
		                <p id="weather-current-wind" class="weather-wind">风向级数</p>
		            </div>
		        </div>
		    </div>
		    <ul class="weather-otherday">
		    	<li>
		            <i class="weather-icon-sunny"></i>
		            <p>load℃</p>
		            <small>load</small>
		        </li>
		        <li>
		        	<i class="weather-icon-sunny"></i>
		            <p>load℃</p>
		            <small>load</small>
		        </li>
		        <li>
		        	<i class="weather-icon-sunny"></i>
		            <p>load℃</p>
		            <small>load</small>
		        </li>
		        <li>
		        	<i class="weather-icon-sunny"></i>
		            <p>load℃</p>
		            <small>load</small>
		        </li>
		    </ul>
		</div>
		<!--天气:end-->
		<p class="sliver">调用方法</p>
		<div class="card" style="padding:8px;">
			<p class="paragraph">通过new Weather("#weather",{"city":"城市名称","expires":"时效(Date类型)"})即可。</p>
		</div>

		<p class="sliver">时效性</p>
		<div class="card" style="padding:8px;">
			<p class="paragraph">为了不要频繁访问服务器天气json数据（百度天气只允许每个ak每天访问5000次）。</p>
			<p class="paragraph">默认缓存了1天的天气，当然您也可以设置指定的缓存时间，通过设置时效来控制缓存时间。</p>
			<p class="paragraph">例如：Weather(elem).showWeather(城市,时效性（1表示1小时，today表示只有今天生效）);</p>
		</div>

		<p class="sliver">样式修改</p>
		<div class="card" style="padding:8px;">
		另外要注意weather-box内部的样式可以都改掉，但唯独含有id，以及class名称不能更改，class为weather-otherday的内部结构不能更改，样式可随意发挥，建议不要更改结构，只改样式。
		</div>
	</article>
	<script src="../scripts/lib/seedsui/seedsui.min.js"></script>
    <!--Exmobi能力-->
    <!--<script src="../scripts/lib/exmobi/exmobi.js"></script>-->
	<script>
		var article=document.querySelector("article");
		var weatherContainer=document.getElementById("ID-WeatherContainer");
		var weather=new Weather(weatherContainer,{
			"city":"南京",
			"expires":new Date("2017/09/28")
		});
		EventUtil.addHandler(article,"swipedown",function(e){
			weatherContainer.classList.add("expand");
		});
		EventUtil.addHandler(article,"tap",function(e){
			weatherContainer.classList.toggle("expand");
		});
		//EventUtil.removeHandler(article,"tap");
		//定义exmobi返回
		function back(){history.go(-1);}
	</script>
</body>
</html>